// 自定义pingfang字体
@font-face {
  font-family: "PingFang SC";
  src: url("../assets/font/PingFangSC-Regular.ttf") format("truetype");
}
@font-face {
  font-family: "ysbt";
  src: url("../assets/font/ysbt.ttf") format("truetype");
}
// pangmenzhengdao
@font-face {
  font-family: "pangmenzhengdao";
  src: url("../assets/font/PangMenZhengDao.ttf") format("truetype");
}
.screen-container {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  background-image: url("../assets/images/hp_bg.png");
  background-size: cover; /* 背景图片覆盖整个容器 */
  background-position: center; /* 背景图片居中 */
  font-family: "PingFang SC";
}
.pangmenzhengdao {
  font-family: "pangmenzhengdao";
}
.ysbt {
  font-family: "ysbt";
}
.screen-content {
  box-sizing: border-box;
  border: 1px solid #000; /* 边框颜色 */
  width: 100%;
  height: 100%;
  color: #fff; /* 内容颜色 */
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  box-sizing: border-box;
  padding-top: 30px;
  .top_title {
    height: 93px;
    width: 100%;
    background-image: url("../assets/images/dxbg.gif");
    background-size: 100% 100%;
    position: absolute;
    top: 0;
    left: 0;
    .title_txt {
      width: 100%;
      text-align: center;
      font-size: 46px;
      font-weight: 600;
      // 增加字间距
      letter-spacing: 10px;
    }
  }
  .bigTime {
    top: 11px;
    left: 173px;
    position: absolute;
    z-index: 999;
    width: 150px;
    height: 48px;
    background-image: url("../assets/images/top_时间_底.gif");
    background-size: 100% 100%;
  }
  .numberData{
    top: 11px;
    right: 173px;
    position: absolute;
    z-index: 999;
    width: 150px;
    height: 48px;
    background-image: url("../assets/images/top_数据后台_底.gif");
    background-size: 100% 100%;
  }
  .address {
    top: 38px;
    right: 155px;
    position: absolute;
    z-index: 999;
    width: 58px;
    height: 24px;
    background-image: url("../assets/images/定位.png");
    background-size: 100% 100%;
  }
}
.box_title {
  width: 454px;
  height: 32px;
  background-image: url("../assets/images/title_bg.gif");
  background-size: 100% 100%; /* 背景图片覆盖整个容器 */
  background-position: center; /* 背景图片居中 */
  text-align: left;
  box-sizing: border-box;
  position: relative;
  z-index: 999;
  .box_title_main {
    display: flex;
    margin-top: 20;
    position: absolute;
    top: -14px;
    align-items: center;
  }
  .title_txt {
    font-size: 20px;
    color: #ffffff;
    line-height: 30px;
    text-shadow: 0px 0px 9px #158eff;
    margin-top: 0;
    margin-left: 5px;
  }
  .title_img {
    width: 38px;
    height: 36px;
    margin-left: 17px;
  }
  .title_txt_en {
    line-height: 12px;
    margin-left: 8px;
    font-size: 12px;
    margin-top: 7px;
  }
}
.main {
  display: flex;
  width: 100%;
  box-sizing: border-box;
  padding-top: 22px;
}
.box-bg {
  background-color: #021b58;
}
.main_l {
  width: 454px;
  margin-left: 20px;
  box-sizing: border-box;
  .box_1 {
    width: 100%;
    height: 210px;
    .nums {
      display: flex;
    }
    .num_box {
      width: 126px;
      margin-left: 19px;
      .num_img {
        width: 100%;
        height: 100px;
        background-image: url("../assets/images/dz.gif");
        display: flex;
        justify-content: center;
        img {
          width: 26px;
          height: 26px;
          margin-top: 42px;
        }
      }
      .num_title {
        width: 100%;
        font-size: 12px;
        color: #c6d1db;
        line-height: 16px;
        text-align: center;
      }
      .num_txt {
        width: 100%;
        font-size: 20px;
        color: #ffffff;
        text-align: center;
        font-size: 24px;
        color: #ffffff;
        line-height: 30px;
      }
    }
  }
  .box_2 {
    height: 210px;
    width: 100%;
    position: relative;
    margin-top: 38px;
    .ring_bg {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      z-index: 0;
      background-image: url("../assets/images/part_2_bg.png");

      .ring_title {
        position: relative;
        margin-top: 94px;
        margin-left: 39px;
        width: 100px;
        text-align: center;
        font-family: Source Han Sans CN, Source Han Sans CN;
        font-weight: 400;
        font-size: 14px;
        color: #c6d1db;
        font-style: normal;
        text-transform: none;
        text-align: center;
      }
      .nbs {
        font-weight: 400;
        font-size: 16px;
        color: #ffffff;
        letter-spacing: 1px;
        text-align: center;
        font-style: normal;
        text-transform: none;
        display: flex;
        width: 100px;
        margin-left: 74px;
        span {
          font-size: 10px;
          margin-top: 6px;
        }
      }
      .nbs_list {
        position: absolute;
        top: 53px;
        right: 20px;
        .nbs2 {
          font-weight: 400;
          font-size: 16px;
          color: #ffffff;
          letter-spacing: 1px;
          text-align: center;
          font-style: normal;
          text-transform: none;
          display: flex;
          height: 41px;
          text-align: right;
          margin-bottom: 12px;
          span {
            font-size: 10px;
            margin-top: 6px;
          }
        }
      }
    }
    .box_ring {
      width: 100%;
      height: 200px;
    }
  }
  .box_3 {
    width: 100%;
    height: 421px;
    margin-top: 38px;
  }
}
.b1 {
  height: 370px;
  width: 100%;
  overflow: hidden;
  .tab_header {
    background: linear-gradient(180deg, #007fff 0%, rgba(0, 127, 255, 0) 100%);
    box-shadow: inset 0px 2px 6px 0px rgba(0, 127, 255, 0.4);
    border-radius: 0px 0px 0px 0px;
    border-top: 1px solid #1cdafb;
    display: flex;
    height: 36px;
    line-height: 36px;
    width: 406px;
    margin-left: 24px;
    box-sizing: border-box;

    padding: 0 17px;
    div {
    height: 36px;
    line-height: 36px;
      font-size: 15px;
      text-align: center;
      width: 85px;
      font-family: Source Han Sans CN, Source Han Sans CN;
      font-weight: 400;
      font-size: 14px;
      color: #d1e8ff;
      letter-spacing: 1px;
      text-align: center;
      font-style: normal;
    }
    .t1 {
      text-align: left;
      width: 70px;
    }
    .t2 {
      width: 100px;
      text-align: left;
    }
    .t3 {
      width: 120px;
      text-align: left;
    }
  }
  .tab_box_list .tab_box:nth-child(2n) {
    background: linear-gradient(
      180deg,
      rgba(0, 127, 255, 0.16) 0%,
      rgba(0, 127, 255, 0) 100%
    );
    box-shadow: inset 0px 2px 6px 0px rgba(0, 127, 255, 0.16);
    border-radius: 0px 0px 0px 0px;
    border-image: linear-gradient(
        180deg,
        rgba(0, 127, 255, 0.6),
        rgba(0, 127, 255, 0)
      )
      1 1;
  }

  .tab_box {
    width: 406px;
    margin-left: 24px;
    height: 32px;
    display: flex;
    color: #fff;
    padding: 0 17px;
    box-sizing: border-box;
    font-weight: 400;
    font-size: 14px;
    div {
      height: 32px;
      line-height: 32px;
      font-size: 14px;
      text-align: center;
      width: 85px;
    }
    .t1 {
      width: 70px;
      text-align: left;
    }
    .t2 {
      width: 100px;
      text-align: left;
    }
    .t3 {
      width: 120px;
      text-align: left;
    }
  }
  .tab_box_1 {
    color: #e24a3b;
  }
  .tab_box_2 {
    color: #c9b217;
  }
  .tab_box_3 {
    color: #1cdafb;
  }
}
.b2 {
  .tab_header {
    width: 406px;
    height: 36px;
    background: linear-gradient(180deg, #007fff 0%, rgba(0, 127, 255, 0) 100%);
    box-shadow: inset 0px 2px 6px 0px rgba(0, 127, 255, 0.4);
    border-radius: 0px 0px 0px 0px;
    border-top: 1px solid #1cdafb;
    div {
      height: 21px;
      line-height: 21px;
      color: rgba(255, 245, 167, 1);
      font-size: 15px;
      text-align: left;
    }
    .t1 {
      width: 90px;
    }
    .t2 {
      width: 90px;
      text-align: center;
    }
    .t3 {
      width: 90px;
    }
    .t4 {
      width: 80px;
      text-align: center;
    }
    .t5 {
      text-align: center;
      width: 80px;
      /*margin-left: 17px;*/
    }
    .t6 {
      text-align: center;
      /* margin-left: 17px;*/
      width: 80px;
    }
    .t7 {
      width: 80px;
      text-align: center;
    }
    .t8 {
      /* margin-left: 27px;*/
      text-align: center;
      width: 120px;
    }
  }
  .tab_box {
    div {
      height: 34px;
      line-height: 34px;
      color: rgb(100, 229, 206);
      font-size: 15px;
      text-align: left;
    }
    .t1 {
      width: 90px;
    }
    .t2 {
      text-align: center;
      width: 90px;
    }
    .t3 {
      width: 90px;
    }
    .t4 {
      width: 80px;
      text-align: center;
    }
    .t5 {
      width: 80px;
      text-align: center;
      /* margin-left: 17px;*/
    }
    .t6 {
      width: 80px;
      text-align: center;
    }
    .t7 {
      width: 80px;
      text-align: center;
    }
    .t8 {
      width: 150px;
    }
  }
}
.main_m {
  width: 970px;
  box-sizing: border-box;
  padding: 0 24px;
  .m_nbs {
    display: flex;
  }
  .nb_left {
    width: 380px;
    margin-left: 68px;
    .nb_left_title {
      width: 100%;
      text-align: center;
      font-family: Source Han Sans CN, Source Han Sans CN;
      font-weight: 400;
      font-size: 16px;
      color: #ffffff;
      line-height: 22px;
      text-align: center;
      font-style: normal;
    }
    .nb_left_text {
      height: 100px;
      width: 100%;
      display: flex;
      justify-content: center;
      background-image: url("../assets/images/数据底_左.gif");
      .nb_left_text_1 {
        text-align: right;
        font-family: PangMenZhengDao, PangMenZhengDao;
        font-weight: 400;
        font-size: 50px;
        color: #1cdafb;
        font-style: normal;
        text-transform: none;
        line-height: 100px;
        width: 100%;
        padding-left: 53px;
        span {
          margin-right: 39px;
        }
      }
    }
  }
  .nb_right {
    margin-left: 28px;
    .nb_left_text {
      background-image: url("../assets/images/数据底_右.gif");
    }
  }
  .big_img {
    width: 809px;
    height: 397px;
    margin-top: 21px;
    margin-left: 60px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .box_1 {
    margin-top: 50px;
    width: 918px;
    height: 327px;
    margin-left: 9px;
  }
}
.main_r {
  width: 455px;
  .box_2 {
    height: 290px;
  }
  .box_3 {
    height: 591px;
    margin-top: 36px;
    .card_list {
      width: 100%;
      height: 520px;
      margin-top: 24px;
      overflow: hidden;
      /deep/.vue3-seamless-vertical-wrapper {
        box-sizing: border-box;
        overflow: hidden;
      }
    }
  }
  .tab_box_list_top {
    width: 410px;
    margin: 0 25px 0 20px;
    display: flex;
    .top_nb {
      width: 80px;
      height: 20px;
      box-sizing: border-box;
      padding-left: 8px;
      line-height: 20px;
      background-image: url("../assets/images/part_5_top1_bg.png");
      background-size: 100% 100%;
      font-weight: 400;
      font-size: 14px;
      color: #e3e9f3;
      line-height: 19px;
      text-align: left;
    }
    .top_nb_1 {
      background-image: url("../assets/images/part_5_top2_bg.png");
    }
    .top_nb_2 {
      background-image: url("../assets/images/part_5_top3_bg.png");
    }
    .top_msg {
      margin-left: 2px;
      .msg_nb {
        font-weight: 500;
        font-size: 14px;
        color: #ffffff;
        text-align: left;
      }
      .msg_ring {
        width: 280px;
        height: 3px;
        background: rgba(255, 255, 255, 0.2);
        border-radius: 0px 0px 0px 0px;

        .msg_ring_active {
          height: 3px;

          background: linear-gradient(
            270deg,
            #f11e0b 0%,
            rgba(241, 30, 11, 0) 100%
          );
        }
        .msg_ring_active_1 {
          background: linear-gradient(
            270deg,
            #e7ce0c 0%,
            rgba(231, 206, 12, 0) 100%
          );
        }
        .msg_ring_active_2 {
          background: linear-gradient(
            270deg,
            #3877f2 0%,
            rgba(56, 119, 242, 0) 100%
          );
        }
      }
    }
    .top_hours {
      font-weight: 400;
      font-size: 20px;
      color: #ffffff;
      text-align: center;
      font-style: normal;
      display: flex;
      margin-left: 5px;
      margin-top: 8px;
      .hst {
        margin-top: 10px;
        font-weight: 400;
        font-size: 12px;
        color: #c6d1db;
        text-align: left;
        margin-left: 2px;
        white-space: nowrap; /* 不换行 */
        overflow: hidden; /* 超出隐藏 */
        text-overflow: ellipsis; /* 超出显示省略号 */
      }
    }
  }
  .line_img {
    width: 410px;
    height: 1px;
    margin-top: 18px;
    margin-bottom: 18px;
  }
  .tab_box_list_main {
    display: flex;
    margin-left: 25px;
    .mn_msg {
      width: 58px;
      .msg_1 {
        width: 100%;
        font-size: 12px;
        color: #c6d1db;
        text-align: center;
      }
      .msg_2 {
        height: 18px;
        width: 100%;
        font-size: 12px;
        color: #c6d1db;
        text-align: center;
        border-top: 1px solid #c6d1db;
      }
    }
    .btn {
      width: 155px;
      height: 33px;
      box-sizing: border-box;
      display: flex;
      margin-left: 23px;
      background-image: url("../assets/images/part_5_number_bg.png");
      background-size: 100% 100%;
      align-items: center;
      .btn_1 {
        font-size: 12px;
        color: #ffffff;
        line-height: 23px;
        margin-left: 25px;
      }
      .btn_2 {
        width: 58px;
        text-align: center;
      }
    }
  }
}
.scoll1 {
  overflow: hidden;
  height: 480px;
  width: 406px;
  margin-left: 24px;
  /deep/.vue3-seamless-vertical-wrapper {
    box-sizing: border-box;
    overflow: hidden;
  }
}
.scoll2 {
  height: 194px;
}

.red {
  color: rgba(241, 30, 11, 1) !important;
  div {
    color: rgba(241, 30, 11, 1) !important;
  }
}
.gree {
  color: rgba(8, 168, 39, 1) !important;
  div {
    color: rgba(8, 168, 39, 1) !important;
  }
}
.yellow {
  color: rgba(231, 206, 12, 1) !important;
  div {
    color: rgba(231, 206, 12, 1) !important;
  }
}

/deep/.tab_box_list {
  height: 106px !important;
  
      .tab_box .t1{
        display: flex;
        align-items: center;
        div{
          width: 11px;
          height: 12px;
          background-size: 100% 100%;
          margin-right: 2px;
        }
        .t1_img_1{
          background-image: url("../assets/images/part_3_icon_first@2x.png");
        }
        .t1_img_2{
          background-image: url("../assets/images/part_3_icon_runner-up@2x.png");
        }
        .t1_img_3{
          background-image: url("../assets/images/part_3_icon_third@2x.png");
        }
      }
}

.bot_img{
  width: 568px;
  height: 50px;
  background-size: 100% 100%;
  position: absolute;
  margin: 0 auto ;

  bottom: 0;
  background-image: url("../assets/images/home_bot_bg.png");
  .bot_img_2{
    width: 334px;
    height: 13.561px;
    background-image: url("../assets/images/anquanjinengshixunzhongxin@2x.png");
    background-size: 100% 100%;
    position: absolute;
    bottom: 8px;
    left: 117px;
    z-index: 999;
  }
}